<template>
  <div>
    <cus-modal
      ref="modal"
      :title="form.id == '' ? '添加' : '编辑'"
      @on-visible-change="onVisibleChange"
      width="500"
      @onOk="onOk"
    >
      <Form
        ref="formValidate"
        :model="form"
        :rules="ruleValidate"
        :label-width="90"
      >
        <FormItem
          label="分类名称"
          prop="categoryName"
          :rules="[
            {
              required: true,
              message: '分类名称不能为空',
              trigger: 'blur',
            },
            {
              required: true,
              message: '名称只能汉字、数字、字母',
              pattern: '^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$',
              trigger: 'blur',
            },
          ]"
        >
          <Input
            v-model="form.categoryName"
            clearable
            maxlength="20"
            style="width: 270px"
            placeholder="请输入分类名称"
          ></Input>
        </FormItem>
        <FormItem label="颜色区分" prop="color">
          <div style="display:flex;">
            <ColorPicker class="ColorPickerStyle" v-model="form.colorCode" recommend/>
            <div style="height: 40px; width: 80px; display:flex;align-items:center;justify-content:center;">
               {{ form.colorCode }}
            </div>
          </div>  
        </FormItem>
      </Form>
      <Spin size="large" fix v-if="loading"></Spin>
    </cus-modal>
  </div>
</template>

<script>
import { saveApiProductcategory, updateApiProductcategory } from "@/api/business/manager";

const form = {
  id: "",
  categoryName: '', // 分类名称
  colorCode: '#2D8CF0',// 颜色区分
};
export default {
  name: "addProductCategory",
  components: {},
  data() {
    return {
      loading: false,
      ruleValidate: {},
      form,
    };
  },
  mounted() {
    this.form = this.$cu.deepClone(form);
  },
  methods: {
    onVisibleChange(v) {
      this.$refs["formValidate"].resetFields();
      if (!v) this.form = this.$cu.deepClone(form);
    },
    show() {
      this.$refs["modal"].show = true;
    },
    onOk() {
      this.$refs["formValidate"].validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.form.id) {
            this.updateApiProductcategoryApi();
          } else {
            this.saveApiProductcategoryApi();
          }
        }
      });
    },
    // 保存商品种类-------------------接口
    saveApiProductcategoryApi() {
      this.loading = true;
      return new Promise((resolve) => {
        let params = {
          categoryName: this.form.categoryName,
          colorCode: this.form.colorCode
        }
        saveApiProductcategory(params).then((res) => {
          this.loading = false;
          if (res.retCode == 2000) {
           this.$parent.onInit();
           this.$refs["modal"].show = false;
           this.$Message.success(res.retMsg);
            resolve();
          } 
        });
      });
    },
    // 修改商品种类-------------------接口
    updateApiProductcategoryApi() {
      this.loading = true;
      return new Promise((resolve) => {
        let params = {
          id:this.form.id,
          categoryName: this.form.categoryName,
          colorCode: this.form.colorCode
        }
        updateApiProductcategory(params).then((res) => {
          this.loading = false;
          if (res.retCode == 2000) {
           this.$parent.onInit();
           this.$refs["modal"].show = false;
           this.$Message.success(res.retMsg);
            resolve();
          } 
        });
      });
    }
  },
};
</script>

<style scoped lang="less">
.colorPicker {
  /deep/.ivu-input {
    padding: 8px 7px !important;
  }
}
.ColorPickerStyle {
  width: 270px;
  /deep/.ivu-color-picker-confirm {
    padding: 11px!important;
  }
  /deep/.ivu-color-picker-color {
    width: 230px;
    height: 26px;
  }
  /deep/.ivu-icon-ios-close {
    display: none;
  }
  /deep/.ivu-input-icon-normal + .ivu-input {
    height: 40px !important;
  }
  /deep/.ivu-input-icon {
    line-height: 40px !important;
  }
}
</style>
